<template>
  <div>
    <v-app-bar>
      <v-app-bar-nav-icon>
        <v-icon large>mdi-trophy-award</v-icon>
      </v-app-bar-nav-icon>
      <v-toolbar-title>实时排行榜</v-toolbar-title>
    </v-app-bar>
    <template v-for="(nul,groupIndex) in new Array(rank_data.groupNum)">
      <template v-if="rank_data.type===1">
        <v-row>
          <v-col cols="1"/>
          <v-col cols="4">
            <div style="font-size: 4vw">{{"第"+(groupIndex+1)+"组"}}</div>
          </v-col>
        </v-row>
      </template>
      <template v-for="(name,index) in getGroupNames(groupIndex+1)">
        <v-row>
          <v-col cols="1"/>
          <v-col cols="10">
            <v-card :color="getColor(index)" dark height="15vw" elevation="10">
              <v-row style="height: 100%;width: 100%">
                <v-col cols="8">
                  <v-row style="width: 100%;height: 50%">
                    <v-col cols="1"/>
                    <v-col cols="11">
                      <div style="font-size: 3vw" v-text="name"/>
                    </v-col>
                  </v-row>
                  <v-row style="width: 100%;height: 50%">
                    <v-col cols="1"/>
                    <v-col cols="4">
                      <div style="font-size: 5vw" v-text="getGroupScores(groupIndex+1)[index]"/>
                    </v-col>
                  </v-row>
                </v-col>
                <v-col cols="2"/>
                <v-col cols="2" style="align-content: center" display="flex" justify="center" align-self="center">
                  <div style="font-size: 10vw">{{index+1}}</div>
                </v-col>
              </v-row>
            </v-card>
          </v-col>
        </v-row>
      </template>
    </template>


  </div>
</template>

<script>
//import ranking_file from '../static/Rank.json'
import colors from 'vuetify/lib/util/colors'
const fs=window.require('fs')

export default {
  name: 'App',
  methods:{
    getData(){
      let data=fs.readFileSync('D:\\Rank.json')
      this.rank_data=JSON.parse(data.toString())
    },
    getColor(index){
      if (this.rank_data.type===2) {
        switch (index) {
          case 0:
            return "#1a237e"
          case 1:
            return "#3949ab"
          case 2:
            return "#3949ab"
          case 3:
            return "#7986cb"
          case 4:
            return "#7986cb"
          case 5:
            return "#7986cb"
        }
      }else if(this.rank_data.type===1){
        switch (index) {
          case 0:
            return "#1a237e"
          case 1:
            return "#3949ab"
          case 2:
            return "#3949ab"
          case 3:
            return "#7986cb"
        }
      }
      return "#7986cb"
    },
    getGroupNames(num){
      if (num===1) return this.rank_data.names1
      if (num===2) return this.rank_data.names2
      if (num===3) return this.rank_data.names3
      if (num===4) return this.rank_data.names4
    },
    getGroupScores(num){
      if (num===1) return this.rank_data.scores1
      if (num===2) return this.rank_data.scores2
      if (num===3) return this.rank_data.scores3
      if (num===4) return this.rank_data.scores4
    }
  },
  data: () => ({
    rank_data:{
      names1:[],
      scores1:[],
      names2:[],
      scores2:[],
      names3:[],
      scores3:[],
      names4:[],
      scores4:[],
      type: 1,
      groupNum: 4
    }
  }),
  created() {
    this.getData()
  }
};
</script>
